<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normal.css">
    <style>
        
        .head{
            width: 100%;
            height: 100px;
        }
        h2{
            font-size: 50px;
            font-weight: 400;
        }
        .books{
            margin: 10px 0;
        }
        .books ul{

            display: flex;
        }
        .books ul li {
            flex: 1;
            height: 320px;
            text-align: center;
            border: 1px solid #d7d7d7;
            margin-left: 10px;
        }
        .books ul li:first-child{
            margin-left: 0;
        }
        .books img{
            margin-top: 5px;
            width: 290px;
            height: 260px;
        }
        .books h4 {
            font-size: 20px;
            font-weight: 400;
        }

        .box2 {
            margin-top: 40px;
            text-align: center;
        }
        .box2 a{
            display: inline-block;
            width: 50px;
            height: 35px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            color: #333;
            font-size: 18px;
        }
        .box2 .prev,
        .box2 .next {
            width: 100px;
        }
        .box2 .current,
        .box2 .elp {
            background-color: #fff;
            border: none;
        }
        .box2 input{
            height: 36px;
            width: 50px;
            border: 1px solid #ccc;
            outline: none;
        }
        .box2 button{
            font-size: 18px;
            width: 65px;
            height: 40px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <!-- 整体-->
    <div class="book-system">
        <!-- 侧边栏 -->
        <div class="left">
            <header>
                <h1>图书管理系统</h1>
            </header>
            <ul class="nav">
                <li>
                    <a href="" class="center">管理中心</a>
                    <ul class="item">
                        <li>
                            <a href=" " class="system">图书信息</a>
                            <ul>
                                <li class="active"><a href="./showbook.html" class="active">浏览图书</a></li>
                                <li><a href="./searchbook.html">查询图书</a></li>
                                <li><a href="./rankingbook.html">图书排行榜</a></li>
                            </ul>
                        </li>
    
                    </ul>
                    <ul class="item">
                        <li>
                            <a href="" class="system">个人信息</a>
                            <ul>
                                <li><a href="../user-info/borrowbook.html">借书情况</a></li>
                                <li><a href="../user-info/setuser.html">账号设置</a></li>
                            </ul>
                        </li>
    
                    </ul>
    
                </li>
    
            </ul>
        </div>
        <!-- 右边介绍 -->
        <div class="right">
            <!-- 上边栏 头像和介绍 -->
            <footer>
                <div class="welcome">
                    <h1>识万卷之书，得万里之路</h1>
                
                </div>
                <span>北京时间：2023/10/26 周四 17:17:17</span>
                <div class="img">
                    <img src="../images/user.png" alt="">
                    <span>usersys</span>
                </div>
    
            </footer>
            <!-- 内容 -->
            <div class="content">
                <!-- 标题 -->
                <div class="head">
                    <span>Books...</span>
                    <h2>最新图书</h2>
                </div>
                <!-- 图书内容 -->
                <div class="books">
                    <ul>
                        <li>
                            <a href="">
                            <img src="../images/sql.png" alt="">
                            </a>
                            
                            <h4>SQL server2019数据库原理及应用</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/sqk.png" alt="">
                            </a>
                            
                            <h4>数据库系统概论</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/sgyy.png" alt="">
                            </a>
                            
                            <h4>三国演义</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/xyj.png" alt="">
                            </a>
                            
                            <h4>西游记</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/math.png" alt="">
                            </a>
                            
                            <h4>高等数学</h4>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <a href="">
                                <img src="../images/qqgk.png" alt="">
                            </a>
                            <h4>全球高考</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/web.png" alt="">
                            </a>
                            <h4>web数据导论</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/ty.png" alt="" style="width: 240px;">
                            </a>
                            <h4>体育与健康</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/wl.png" alt="">
                            </a>
                            <h4>物理</h4>
                        </li>
                        <li>
                            <a href="">
                                <img src="../images/yy.png" alt="">
                            </a>
                            <h4>英语</h4>
                        </li>
                    </ul>
                </div>
                <!-- 底部 -->
                <div class="box2">
                    <a href="#" class="prev current">&lt;&lt;上一页</a>
                    <a href="#" class="current">1</a>
                    <a href="#">2</a>
                    <a href="#">3</a>
                    <a href="#">4</a>
                    <a href="#">5</a>
                    <a href="#" class="elp">...</a>
                    <a href="#" class="next">&gt;&gt;下一页</a>
                    到第
                    <input type="text" name="" id="">
                    页
                    <button>确定</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>